<template>
  <el-dialog :title="title"
             :width="width"
             :visible.sync="dialogVisible"
             :close-on-click-modal="closeOnClickModal"
             :close-on-press-escape="closeOnPressEscape"
             @close="close"
             @open="open">
    <slot>自定义内容</slot>
    <div v-if="showFooter" slot="footer">
      <slot name="footer_l"></slot>
      <el-button type="primary" @click="confirm">确 定</el-button>
      <el-button type="default" @click="cancel">取 消</el-button>
      <slot name="footer_r"></slot>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "Dialog",
    props: {
      // 对话框标题
      title: {
        type: String,
        default: '打开对话框'
      },
      // 对话框宽度
      width: {
        type: String,
        default: '30%'
      },
      // 对话框开关
      visible: {
        type: Boolean,
        default: false
      },
      // 显示footer
      showFooter: {
        type: Boolean,
        default: true
      },
      // 是否可以通过点击 modal 关闭 Dialog
      closeOnClickModal: {
        type: Boolean,
        default: false
      },
      // 是否可以通过按下 ESC 关闭 Dialog
      closeOnPressEscape: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      dialogVisible: {
        get() {
          return this.visible
        },
        set(val) {
          /** 请在父组件接受此方法，将val赋值给父组件visible,否则对话框将无法通过esc或关闭按钮关闭 */
          this.$emit('updateVisible', val)
        }
      }
    },
    methods: {
      /** Dialog 关闭的回调   */
      close() {
        this.$emit('close')
      },
      /** Dialog 打开的回调   */
      open() {
        this.$emit('open')
      },
      /** Dialog 点击确定按钮的回调 */
      confirm() {
        this.$emit('confirm')
      },
      /** Dialog 点击取消按钮的回调*/
      cancel() {
        this.$emit('cancel')
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
